<template>
	<div class="container">
		<!-- 搜索组件 -->
		<div class="search">
			<i-search mode="no-search" @clickinput="handleClickInput" shape="circle" placeholder="请输入要搜索的结果" text="搜索"></i-search>
			
		</div>
		  <!-- 轮播图 -->
		   <div>
		<swiper :indicator-dots="true" :autoplay="true"  :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in this.swiper" :key="index"  >
				<view class="swiper-item"> <image class="im1" :src="item.src" mode="aspectFill"></image></view>
			</swiper-item>
		</swiper>
		  </div>
		  
		  <!-- 导航 -->
		<div>
		<view class="iconList" >
		<view>
		<i-icon name="icon-test" size="80" color="orange"></i-icon>
			<span>看榜单</span>
		</view>
		<view >
		<i-icon name="startRead" size="80" color="blue"></i-icon>
			<span>听小说</span>
		</view>
		<view  >
		<i-icon name="icon09" size="80" color="grey"></i-icon>
			<span>听音乐</span>
		</view>
		<view >
		<i-icon name="zhishi" size="80" color="green"></i-icon>
			<span>听知识</span>
		</view>
		</view>
		 </div>
		 <div>
	    <view>
			<view class="title">
               <view class="text1">猜你喜欢</view>
			   <view  class="text2">查看全部 ></view>
			</view>
		      <!-- 四大名著 -->
			 <view class="book_list">
				 <view class="list2" v-for="(item,index) in rebooks" :key='index'>
				
				 <view> <image :src="item.src" mode="" class="im2"></image></view>
				 <view>{{item.name}}</view>
				 </view>
				 
			 </view>
		</view>
	        </div>
			<!-- 内容 -->
			<div  v-for="item in bookResources" :key="item.id" class="buttom" >
				
			<view class="titles">
            <view class="header">
             {{item.headerTitle}}  
            </view>
			
			<view class="text2">
			查看全部 >
			</view>
			</view>
		     <div class="content"   v-for="items in item.books" :key="item.id"  > 
			  <div class="content-left"><image  class="im6" :src="items.imgurl" ></image></div>
			   <div class="content-right">
			   <div class="book_name">
				   	{{items.name}}
			  </div>
		        <div class="content1">
		      	{{items.synopsis}}
		        </div>
			   
			   </div>
			  </div>
			</div>
		</div>
		

</template>

<script>
	import search from "@/components/i-search/i-search.vue"
	import Index from "@/models/index.js"
	export default {
		data() {
			return {
				data: [],
				swiper:[],
				rebooks:[],
				bookResources:[]
			}
		},

		onLoad() {
	this._getIndexList()
		},

		
		methods: {
			handleClickInput: function(event) {
				
				
			},
			
			
	   async _getIndexList() {
				const res = await Index.getIndexList()
				// 轮播图数据
				 this.swiper= res.swiperImages
				this.rebooks=res.Rebooks
				this.bookResources=res.bookResources
				console.log(this.bookResources)
			}, 
			
	
		}
	}
</script>

<style>
	.search {
		padding: 0 20rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
		
	.im1{
     width: 100%;
	 height: 100%;
	}
	swiper{
		margin-top: 30rpx;
	}
		
	.iconList{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	   justify-content: space-around;
	   margin-bottom: 30rpx;
	}
    
       	span{
		color: #ccc;
		padding-top: 50rpx;
	}
		
	.title{
		display: flex;
		justify-content:space-between;
	},
	.text1{
	 font-size: 40rpx;
	 font-weight: 600;
	 margin-left: 20rpx;
	}
	.text2{
	  color: #ccc;
	  margin-right: 20rpx;
	}
		
	.book_list{
	    display: flex;
		justify-content:space-around;
		align-items: center;
		text-align: center;
	}
		
	.im2{
		height: 280rpx;
		width: 250rpx;
	}
		
	.list2{
		margin-top: 30rpx;
		/* color: #ccc; */
	}
	.titles{
		  display: flex;
		  justify-content: space-between;
	}
		.content{
			display: flex;
			height: 350rpx;
			margin-top: 30rpx;
			
		}
	.content-left{
		width: 35%;
		height: 350rpx;
		/* background-color: #0077AA; */
	     margin: 30rpx 50rpx;
	}
	.content-right{
		width: 65%;
		/* background: #007AFF; */
	}
	.im6{
		width: 90%;
		height: 280rpx;
		border-radius: 25rpx;
	}
	.header{
		font-size: 40rpx;
		font-weight: 500;
		margin-left: 20rpx;
		
	}
	.book_name{
		font-size: 40rpx;
		font-weight: 500;
		margin-bottom: 30rpx;
	}
		
	.content1{
        font-size: 30rpx;
		color: #C0C0C0;
	}
		
	.buttom{
		margin-top: 30rpx;
	}
	swiper{
		height: 500rpx;
	}
		

</style>
